body {
    margin: 0;
    padding: 0;
    background: #3498db;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateX(70deg);
}

.ripple {
    position: fixed;
    top: 0;
    transform: translate(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: ripple 4s linear infinite;
}

.r2 {
    animation-delay: 0.8s;
}

.r3 {
    animation-delay: 1.6s;
}

.r4 {
    animation-delay: 2.4s;
}

.r5 {
    animation-delay: 3.2s;
}

.r6 {
    animation-delay: 4s;
}


@keyframes ripple {
    from {
        border: 4px solid #8e44ad;
        background: #9b59b670;
    }
    to {
        border: 0px solid #8e44ad;
        background: #9b59b670;
        width: 400px;
        height: 400px;
        top: 20px;
        opacity: 0;
    }

}





